<script src="../../../wxapp/wxapp/app.js"></script>
<template>
  <view class="contenter">
    <view class="head" >
      <view class="flex" style="height: 122rpx">
        <view @click="userDetail">
          <item-image :type="'1'" :img="userData.userimg" :size="122"  class="u-margin-right-8"  :fade="false"/>
        </view>
        <view class="right">
          <view class="name">{{userData.nickname}}</view>
          <view class="flex_bt u-flex text">
            <view>{{userData.phone}}</view>
            <view v-if="type == 1">好评率：{{userData.rate}}%</view>
          </view>
          <view class="dian" v-if="type!=1">店长</view>
        </view>
      </view>
      <view class="flex_j_c flex center">关注健康之美</view>
    </view>
    <view class="content">
      <view class="store flex flex_bt flex-column" v-if="type!= 1">
        <view class="u-flex flex_bt">
          <view class="u-flex">
            <u-image  :src="`/static/user/store_serve.png`"  :height="36" :width="36" :fade="false"></u-image>
            <view class="name">服务达成率</view>
          </view>

          <view class="lv" v-if="type == 1">{{userData.service_rate}}%</view>
          <view class="lv" v-if="type == 2">{{service_rate}}%</view>
        </view>
        <view class="u-flex flex_bt">
          <view class="u-flex">
            <u-image  :src="`/static/user/store_lv.png`"  :height="36" :width="36" :fade="false"></u-image>
            <view class="name">销售完成率</view>
          </view>
          <view class="lv" v-if="type == 1">{{userData.sales_rate}}%</view>
          <view class="lv" v-if="type == 2">{{sales_rate}}%</view>
        </view>
      </view>
      <!--今日数据-->
      <view class="item">
        <view class="u-flex" >
          <u-image v-if="type == 1" :src="`/static/user/day.png`"  :height="40" :width="40" :fade="false"></u-image>
          <u-image v-else :src="`/static/user/store_day.png`"  :height="38" :width="38" :fade="false"></u-image>
          <view class="day">今日数据</view>
        </view>
        <view class="flex" >
          <view class="money" @click="userServer(1)">
            <view class="name" v-if="type==1">服务人数</view>
            <view class="name u-flex" v-if="type==2">待服务订单<u-icon  name="arrow-right"  color="#ACACAC" size="21"></u-icon></view>
            <view class="num u-flex">
              <view>{{userData.day_service}}</view>
              <view class="ren">人</view>
            </view>
          </view>
          <view class="money" @click="userSales(1)">
            <view class="name u-flex">销售额<u-icon v-if="type == 2" name="arrow-right"  color="#ACACAC" size="21"></u-icon></view>
            <view class="num u-flex">
              <view>{{userData.day_sales}}</view>
              <view class="ren">元</view>
            </view>
          </view>
          <view class="money" @click="orderNum(1)">
            <view class="name" v-if="type==1">总收入</view>
            <view class="name u-flex" v-if="type==2">订单数<u-icon  name="arrow-right"  color="#ACACAC" size="21"></u-icon></view>
            <view class="num u-flex">
              <view  v-if="type==1">{{userData.day_income}}</view>
              <view v-if="type==2">{{userData.day_num}} </view>
              <view class="ren" v-if="type==1">元</view>
              <view class="ren" v-if="type==2">单</view>
            </view>
          </view>
        </view>
      </view>
      <!--本月数据-->
      <view class="item">
        <view class="u-flex">
          <u-image v-if="type == 1" :src="`/static/user/moth.png`"  :height="37" :width="43" :fade="false"></u-image>
          <u-image v-else :src="`/static/user/store_math.png`"  :height="35" :width="35" :fade="false"></u-image>
          <view class="day">本月数据</view>
        </view>
<!--        "day_service": 1, //当天待服务订单-->
<!--        "time_count_uid": 0 //本月服务人数-->
        <view class="flex" >
<!--          <view class="money" @click="userServer(2)">-->
          <view class="money" >
            <view class="name" >服务人数</view>
            <view class="num u-flex">
              <view v-if="type == 1">{{userData.month_service}}</view>
              <view v-if="type == 2">{{userData.time_count_uid}}</view>
              <view class="ren">人</view>
            </view>
          </view>
          <view class="money" @click="userSales(2)">
            <view class="name u-flex">销售额 <u-icon v-if="type == 2" name="arrow-right"  color="#ACACAC" size="21"></u-icon></view>
            <view class="num u-flex">
              <view>{{userData.month_sales}}</view>
              <view class="ren">元</view>
            </view>
          </view>
          <view class="money"  @click="orderNum(2)">
            <view class="name" v-if="type==1">总收入</view>
            <view class="name u-flex" v-if="type==2">订单数<u-icon name="arrow-right"  color="#ACACAC" size="21"></u-icon></view>
            <view class="num u-flex">
              <view  v-if="type==1">{{userData.month_income}}</view>
              <view v-if="type==2">{{userData.month_num}}</view>
              <view class="ren"  v-if="type==1">元</view>
              <view class="ren" v-if="type==2">单</view>

            </view>
          </view>
        </view>
      </view>
      <!--功能块-->
      <view class=" function u-flex u-flex-wrap">
        <view class="foun" v-for="(data,index) in tabList" @click="tabUrl(data)" :key="index">
          <u-image :src="`/static/user/${data.icon}.png`"  :height="54" :width="64" :fade="false"></u-image>
          <view class="name">{{data.name}}</view>
        </view>
      </view>
    </view>
    <tabbar  :active="1"></tabbar>
  </view>
</template>

<script>
import Tabbar from "../../components/tabbar";
export default {
  name: "index",
  components: {Tabbar},
  data(){
    return{
      type:0,//1是技师，2是门店,
      userData:{},
      storeId:'',//门店id
      sales_rate:'',//服务达成率
      service_rate:'',//服务达成率
    }
  },

  onLoad(option){
    this.type = uni.getStorageSync('type')
    this.storeId = uni.getStorageSync('store').id
  },
  onShow(){
    uni.hideHomeButton();
    uni.hideTabBar({
      animation: false
    })
    if(this.type === 1){
      //获取技师信息
      this.$api.userData(this.form).then(res => {
        this.userData = res.data
      })
    }else {
      //获取門店信息
      this.$api.storeData().then(res => {
        this.userData = res.data
      })
      //请求门店达成率
      this.$api.achRate({store_id:this.storeId}).then(res => {
        this.service_rate = res.data.service_rate
        this.sales_rate = res.data.sales_rate
      })
    }

  },
  computed:{
    tabList(){
      let list
      if(this.type == 1){
        list = [
          {name:'我的客户',url:'/pagesA/technicianUser/myUser',icon:'kehu'},
          {name:'核销记录',url:'/pagesA/serverRecord/index',icon:'hexiao'},
          {name:'收益明细',url:'/pagesA/profit/index',icon:'shouyi'},
          {name:'当班时间',url:'/pagesA/OnDutyTime/index',icon:'shijian'},
        ]
      }else {
        list = [
          {name:'门店客户',url:'/pagesA/technicianUser/myUser',icon:'store_user'},
          {name:'技师管理',url:'/pagesA/technicianManagement/index',icon:'store_jishi'},
          {name:'技师排行榜',url:'/pages/index/technician',icon:'store_manyi'},
          {name:'销售排行榜',url:'/pages/index/sale',icon:'store_paihang'},
          {name:'商品订单',url:'/pagesA/commodityOrder/index',icon:'store_shop'},
        ]
      }
      return list
    }
  },

  methods:{
    //跳转待服务
    userServer(type){
      if(this.type === 2){
        this.$u.route({
          url: '/pagesA/user/server',
          params:{
            type:type ,//1是当日 2是当月
          }
        });
      }

    },
    //跳转销售额
    userSales(type){
      if(this.type === 2){
        this.$u.route({
          url: '/pagesA/user/salesVolume',
          params:{
            type:type ,//1是当日 2是当月
          }
        });
      }
    },
    //跳转订单
    orderNum(type){
      if(this.type === 2){
        this.$u.route({
          url: '/pagesA/user/orderNum',
          params:{
            type:type ,//1是当日 2是当月
          }
        });
      }
    },
    //跳转个人资料
    userDetail(){
      this.$u.route({
        url: '/pages/user/detail',
      });
    },
    // 跳转页面
    tabUrl(item){
      let type = ''
      if(item.name == '技师排行榜')(
        type  = 1
      )
      this.$u.route({
        url: item.url,
        params:{
          type:type
        }
      });
    },
  },
}
</script>

<style scoped lang="scss">
  .head{
    background: url("https://yft.xibuts.cn/upload/bg/bg.png") no-repeat;
    background-size: 100% 100%;
    height: 300rpx;
    padding: 40rpx 80rpx;
    .right{
      margin-left: 20rpx;
      width: 100%;
      position: relative;
      .dian{
        width: 112rpx;
        height: 42rpx;
        background: linear-gradient(180deg, #FCD8A0 0%, #EABD6E 100%);
        border-radius: 24rpx;
        text-align: center;
        font-size: 24rpx;
        color: #4B4B4B;
        position: absolute;
        right: 0;
        top: 30rpx;
        line-height: 42rpx;
      }
      .name{
        font-size: 28rpx;
        color: white;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      .text{
        width: 100%;
        font-size: 24rpx;
        color: white;
      }
    }
    .center{
      color: white;
      font-size: 24rpx;
      letter-spacing:20rpx;
    }
  }
  .content{
    margin: 0 32rpx;

    position: relative;
    top: -70rpx;
    .item{
      height: 240rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      padding: 24rpx 40rpx;
      margin-bottom: 20rpx;
      .day{
        color: #575757;
        font-size: 28rpx;
        margin-left: 30rpx;
      }
      .money{
        width: 194rpx;
        height: 132rpx;
        background: #F5F5F5;
        border-radius: 12rpx;
        margin-top: 22rpx;
        padding: 18rpx 22rpx;
        margin-right: 14rpx;
        &:last-child{
          margin-right: 0;
        }
        .name{
          color: #606060;
          font-size: 24rpx;
        }
        .num{
          color: #45806E;
          font-size: 40rpx;
          margin-top: 15rpx;
        }
        .ren{
          color: #9E9E9E;
          margin-left: 14rpx;
          font-size: 20rpx;
        }
      }
    }
    .function{
      background: white;
      padding-top: 32rpx;
      border-radius: 12rpx;
      .foun{
        text-align: center;
        margin-bottom: 40rpx;
        width: 25%;
        /deep/.u-image{
          margin: 0 auto;
        }
        .name{
          color:#575757;
          margin-top: 10rpx;
          font-size: 24rpx;

        }
      }
    }
    .store{
      color: #575757;
      font-size: 20rpx;

      height: 160rpx;
      background: #FFFFFF;
      border: 2rpx solid #FFFFFF;
      box-shadow: 0px 6rpx 6rpx rgba(0, 0, 0, 0.08);
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      .name{
        margin-left: 20rpx;
        font-size: 24rpx;
      }
      .lv{
        margin-right: 20rpx;
      }
    }


  }

</style>